<template>
  <div
    class="time-cell"
    :style="[cellStyle]">
    <div class="title">{{ params.timeRange }}</div>
    <div
      v-for="(citem, cindex) in params.data"
      :key="params.timeRange + '-' + cindex"
      class="content-item">
      {{ citem[displayProp] }}
    </div>
  </div>  
</template>

<script>
export default {
  name: 'TimeCell',
  props: {
    params: {
      type: Object,
      required: true
    },
    perTime: {
      type: Number,
      required: true
    },
    perWidth: {
      type: Number,
      required: true
    },
    displayProp: { // data中需要展示的字段
      type: String,
      default: 'programName'
    },
    backgroundColor: {
      type: String,
      default: '#ffaeae'
    }
  },
  computed: {
    cellStyle() {
      const {startMs, duringMs} = this.params
      const left = (startMs / this.perTime * this.perWidth) + 'px'
      const width = (duringMs / this.perTime * this.perWidth) + 'px'
      return {
        left,
        width,
        backgroundColor: this.backgroundColor
      }
    }
  }
}
</script>

<style lang="scss">
.time-cell {
  position: absolute;
  height: calc(100% - 4px);
  overflow: hidden;
  top: 2px;

  .title, .content-item {
    white-space: pre-line;
  }

}
</style>